/**
 * 主页面
 */
import React from 'react';
import {StatusBar, StyleSheet, View, Image} from 'react-native';
import {Carousel, Button} from '@ant-design/react-native';

import {GUIDE1, GUIDE2, GUIDE3} from '../../image';
import {
  windowHeight,
  windowStatusBarHeight,
  windowWidth,
} from '../../utils/commonUtils';

export const Guide = ({navigation}) => {
  return (
    <View>
      <StatusBar
        translucent={true}
        backgroundColor="transparent"
        barStyle={'dark-content'}
      />

      <Carousel
        style={styles.wrapper}
        dotStyle={{backgroundColor: '#C4C4C4', width: 8, height: 8}}
        dotActiveStyle={{backgroundColor: '#20A162', width: 16, height: 8}}>
        <View style={styles.containerHorizontal}>
          <Image
            source={GUIDE1}
            style={styles.guide_bj}
            resizeMode={'stretch'}
          />
        </View>
        <View style={styles.containerHorizontal}>
          <Image source={GUIDE2} style={styles.guide_bj} />
        </View>
        <View style={[styles.containerHorizontal, {position: 'relative'}]}>
          <Image source={GUIDE3} style={styles.guide_bj} />
          <View style={styles.guide_btn}>
            <Button
              type="primary"
              size="large"
              activeStyle={{
                backgroundColor: 'rgba(32,161,98,0.67)',
                borderColor: 'rgba(32,161,98,0.67)',
              }}
              style={{backgroundColor: '#20A162'}}
              onPress={() => navigation.replace('Main')}>
              开启愔悦之旅
            </Button>
          </View>
        </View>
      </Carousel>
    </View>
  );
};
const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#fff',
    width: '100%',
    height: '100%',
  },
  containerHorizontal: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 150,
  },
  guide_bj: {
    width: windowWidth,
    height: windowHeight + windowStatusBarHeight,
  },
  guide_btn: {
    position: 'absolute',
    bottom: 70,
    margin: 0,
  },
});
